useEditableTable

2024-05-20 17:48| 来源: 网络整理| 查看: 265

useEditableTable

useEditeableTable allows you to implement the edit feature on the with ease and returns properties that can be used on Ant Design's and components.

useEditeableTable hook is extended from the useTable hook from the @refinedev/antd package. This means that you can use all the features of useTable hook.

Usage

Here is an example of how to use useEditableTable hook. We will explain the details of this example and hooks usage in the following sections.

localhost:3000/postsimport { List, SaveButton, EditButton, TextField, useEditableTable,} from "@refinedev/antd";import { Table, Form, Space, Button, Input } from "antd";interface IPost { id: number; title: string;}const PostList: React.FC = () => { const { tableProps, formProps, isEditing, setId: setEditId, saveButtonProps, cancelButtonProps, editButtonProps, } = useEditableTable(); return ( ({ // eslint-disable-next-line onClick: (event: any) => { if (event.target.nodeName === "TD") { setEditId && setEditId(record.id); } }, })} > { if (isEditing(record.id)) { return ( ); } return ; }} /> { if (isEditing(record.id)) { return ( Cancel ); } return ( ); }} /> );};Was this helpful?Editing with buttons

Let's say that we want to make the Post data where we show the id and title values a listing page:

This time, to add the edit feature, we have to cover the component with a component and pass the properties coming from useEditableTable to the corresponding components:

/pages/posts/list.tsximport { List, useEditableTable, TextField } from "@refinedev/antd";import { Table, Form } from "antd";export const PostList: React.FC = () => { const { tableProps, formProps } = useEditableTable(); return ( );};interface IPost { id: number; title: string;}

Now lets add a column for edit buttons:

/pages/posts/list.tsximport { List, SaveButton, EditButton, useEditableTable,} from "@refinedev/antd";import { Table, Form, Space, Button,} from "antd";export const PostList: React.FC = () => { const { tableProps, formProps, isEditing, saveButtonProps, cancelButtonProps, editButtonProps, } = useEditableTable(); return ( { if (isEditing(record.id)) { return ( Cancel ); } return ( ); }} /> );};

isEditing function that returns from useEditableTable lets us check whether a line is currently in edit mode or not.

For now, our post is not editable yet. If a post is being edited, we must show editable columns inside a using conditional rendering:

/pages/posts/list.tsximport { List, SaveButton, EditButton, TextField, useEditableTable,} from "@refinedev/antd";import { Table, Form, Space, Button, Input,} from "antd";export const PostList: React.FC = () => { const { tableProps, formProps, isEditing, saveButtonProps, cancelButtonProps, editButtonProps, } = useEditableTable(); return ( { if (isEditing(record.id)) { return ( ); } return ; }} /> { if (isEditing(record.id)) { return ( Cancel ); } return ( ); }} /> );};

With this, when a user clicks on the edit button, isEditing(lineId) will turn true for the relevant line. This will also cause to show up on the line that's being edited. When the editing is finished, a new value can be saved by clicking .

Implementation Tips:

By giving the component a unique render property, you can render the value in that column however you want.

For more information, refer to the documentation →

Was this helpful?Editing by clicking to row

A line with the id value can be put to edit mode programmatically by using the setId function that returns from useEditableTable.

The onRow property of the component can be used to put a line to editing mode when it's clicked on. The function given to the onRow property is called every time one of these lines is clicked on, with the information of which line was clicked on.

We can use setId to put a line to edit mode whenever it's clicked on.

/pages/posts/list.tsximport { List, TextField, useEditableTable } from "@refinedev/antd";import { Table, Form, Input } from "antd";export const PostList: React.FC = () => { const { tableProps, formProps, isEditing, setId } = useEditableTable(); return ( ({ onClick: (event: any) => { if (event.target.nodeName === "TD") { setId && setId(record.id); } }, })} > { if (isEditing(data.id)) { return ( ); } return ; }} /> );};Was this helpful?Properties

All useForm and useTable properties are available in useEditableTable. You can read the documentation of useForm and useTable for more information.

Was this helpful?autoSubmitClose

autoSubmitClose makes the table's row close after a successful submit. It is true by default.

For this effect, useEditableTable automatically calls the setId function with undefined after successful submit.

const editableTable = useEditableTable({ autoSubmitClose: false,});Was this helpful?Return Values

All useForm and useTable return values are available in useEditableTable. You can read the documentation of useForm and useTable for more information.

Was this helpful?cancelButtonProps

cancelButtonProps returns the props for needed by the .

By default, the onClick function is overridden by useEditableTable. Which will call useForm's setId function with undefined when called.

cancelButtonProps: () => ButtonProps;Was this helpful?editButtonProps

editButtonProps takes id as a parameter and returns the props needed by the .

By default, the onClick function is overridden by useEditableTable. Which will call useForm's setId function with the given id when called.

editButtonProps: (id: BaseKey) => ButtonProps;

It also returns a function that takes an id as a parameter and returns the props for the edit button.

Was this helpful?isEditingisEditing: (id: BaseKey) => boolean;

Takes a id as a parameter and returns true if the given BaseKey is equal to the selected useForm's id.

Was this helpful?APIPropertiesWas this helpful?Type ParametersPropertyDescriptionTypeDefaultTQueryFnDataResult data returned by the query function. Extends BaseRecordBaseRecordBaseRecordTErrorCustom error object that extends HttpErrorHttpErrorHttpErrorTVariablesValues for params{}TSearchVariablesValues for search params{}TDataResult data returned by the select function. Extends BaseRecord. If not specified, the value of TQueryFnData will be used as the default value.BaseRecordTQueryFnDataWas this helpful?Return valuesPropertyDescriptionTypesearchFormPropsAnt Design propsFormPropstablePropsAnt Design propsTablePropstableQueryResultResult of the react-query's useQueryQueryObserverResultsorterCurrent sorting stateCrudSortingfiltersCurrent filters stateCrudFiltersformAnt Design instanceFormInstanceformPropsAnt Design propsFormPropssaveButtonPropsProps for a submit button{ disabled: boolean; onClick: () => void; }cancelButtonPropsProps for a cancel button{ onClick: () => void; }editButtonPropsProps for an edit button{ onClick: () => void; }queryResultResult of the query of a recordQueryObserverResultmutationResultResult of the mutation triggered by submitting the formUseMutationResultformLoadingLoading state of form requestbooleanidRecord id for edit actionBaseKeysetIdid setterDispatch

【本文地址】

公司简介

联系我们